<template>
    <div class="left-container" v-sdrag="{componentName: componentName}">
        <img :src="url" alt="" />
        <div>{{componentName}}</div>
    </div>
</template>
<script>
    export default {
        props: {
            //组件
            component: {
                type: [Object, String],
                default() {
                    return {}
                }
            },
        },
        data() {
            return {

            }
        },
        computed: {
            url() {
                return this.component.imgName ? 
                    `static/img/${this.component.imgName}` : 
                        `static/img/${this.componentName}.png`;
            },
            componentName() {
                return this.component.componentName || this.component;
            }
        } 
    }
</script>
<style scoped>
.left-container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100px;
}
.left-container img {
    width: 80px;
    /* width: 50px; */
}
</style>

